<script setup>

import {setWindowTitle} from "@/assets/js/TitleUtils";
import {setupMapState} from "@/assets/js/vuexUtils";
import FavorForum from "@/components/home/FavorForum.vue";
import ForumSearch from "@/components/home/ForumSearch.vue";
import ForumSubGroup from "@/components/home/ForumSubGroup.vue";
import {ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";

const {currentUid, currentFavorForum} = setupMapState("Account", ["currentUid", "currentFavorForum"])
const {indexForums} = setupMapState("Resources", ["indexForums"])


setWindowTitle("社区")

const route = useRoute()

const router = useRouter()
const initHash = (route) => {
  if (route.hash) {
    return route.hash.substring(1)
  }
  if (currentUid.value) {
    return "favor"
  }
  if (indexForums.value) {
    return indexForums.value[0]
  }
  return undefined
}

const activeTab = ref(initHash(route))

const tabChanged = (name) => {
  router.push({hash: "#" + name})
}

watch(route, (nv, ov) => {
  activeTab.value = initHash(nv)
})


</script>
<template>
  <div id="home">
    <el-tabs id="tabs" v-model="activeTab" style="height: 100%" type="border-card" @tab-change="tabChanged">
      <el-tab-pane class="tab-pane" label="搜索版面" lazy name="search">
        <forum-search/>
      </el-tab-pane>
      <el-tab-pane v-if="currentFavorForum" class="tab-pane" label="收藏版面" lazy name="favor">
        <h5 v-if="currentFavorForum.filter(i=>i.type==='版面').length>0">版面</h5>
        <favor-forum v-for="item in currentFavorForum.filter(i=>i.type==='版面')" :forum="item"/>
        <h5 v-if="currentFavorForum.filter(i=>i.type==='合集').length>0">合集</h5>
        <favor-forum v-for="item in currentFavorForum.filter(i=>i.type==='合集')" :forum="item"/>
      </el-tab-pane>
      <el-tab-pane v-for="group in indexForums" v-if="indexForums" :label="group.name" :name="group.id" class="tab-pane" lazy>
        <el-scrollbar>
          <forum-sub-group :groups="group.subGroups"/>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style scoped>
.tab-pane {
  text-align: left;
}
</style>